<template>
  <i class="volvo-icon" :class="['icon-' + name]">
    <span v-if="svg" v-html="svg"></span>
    <template v-else>
      <slot></slot>
    </template>
  </i>
</template>

<script setup>
defineProps({
  name: {
    type: String,
    required: true
  },
  svg: {
    type: String,
    default: ''
  }
})
</script>

<style scoped>
.volvo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-shopping-cart::before {
  content: "🛒";
  font-size: 24px;
}

.icon-info::before {
  content: "ⓘ";
  font-size: 16px;
  color: #999;
}

:deep(svg) {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
</style>
